<template>
	<view class="cart">
		<!--<view class="header" :style="{ position: headerPosition, top: headerTop }">-->
			<!--<view class="title">购物车</view>-->
		<!--</view>-->
		<!--&lt;!&ndash; 占位 &ndash;&gt;-->
		<!--<view class="place"></view>-->
		<!-- 购物车为空 -->
		<view v-if="cartList.length === 0" class="empty">
			<text class="iconfont icongouwuche" :class="'text-'+themeColor.name"></text>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator
					class="navigator"
					:class="'text-'+themeColor.name"
					v-if="hasLogin"
					url="../category/category"
					open-type="switchTab"
					>随便逛逛></navigator
				>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" :class="'text-'+themeColor.name" @tap="navTo('/pages/public/logintype')"
					>登录/注册 ></view
				>
			</view>
		</view>
		<!-- 购物车列表 -->
    <block v-else>
      <view class="goods-list" v-for="(group, groupIndex) in groupedCartItems" :key="groupIndex">
        <!-- 按类型分组显示商品 -->

        <!-- 分组标题 -->
        <view class="group-title">
          <text>{{ getProductTypeName(group.type) }}</text>
          <!-- 分组结算按钮 -->
          <view
            class="group-settle"
            :class="{ 'active': hasGroupSelectedItems(group) }"
            @tap="settleGroup(group)"
          >
            结算
          </view>
        </view>

        <!-- 该组商品列表 -->
        <view class="rf-cart-row" v-for="(row, index) in group.items" :key="row.id">
          <!-- 删除按钮 -->
          <!--					<view class="menu" @tap.stop="deleteCartItem(row.id, 'one')" :class="'bg-'+themeColor.name">-->
          <!--						<text class="iconfont icon iconiconfontshanchu1"></text>-->
          <!--					</view>-->
          <!-- 商品 -->
          <view
              class="carrier"
              :class="[
							theIndex === getGlobalIndex(groupIndex, index) ? 'open' : oldIndex === getGlobalIndex(groupIndex, index) ? 'close' : ''
						]"
          >
            <!-- checkbox -->
            <view class="checkbox-box" @tap="selected(getGlobalIndex(groupIndex, index), row)">
              <view
                  class="checkbox"
                  :class="[
									parseInt(row.status, 10) === 0 ? `checkbox-disabled ${'text-'+themeColor.name}` : 'text-'+themeColor.name
								]"
              >
                <view :class="[row.selected === 1 ? `on ${'bg-'+themeColor.name}` : '']"></view>
              </view>
            </view>
            <!-- 商品信息 -->
            <view class="goods-info">
              <view class="img">
                <image :src="row.productItem.thumbnail"></image>
              </view>
              <view class="info">
                <view
                    class="title in2line"
                    @tap="navTo(`/pages/officeShop/product/detail?id=${row.product_id}`)"
                >
                  {{ row.productItem.name }}
                </view>
                <view class="price-number">
                  <view class="price">{{ moneySymbol }}{{ row.productItem && row.productItem.price }}</view>
                  <view class="number">
                    <view class="sub" @tap.stop="sub(row, getGlobalIndex(groupIndex, index))">
                      <text class="iconfont icon icon-jianhao"></text>
                    </view>
                    <view class="input" @tap.stop="discard">
                      <input
                          type="number"
                          :class="'text-'+themeColor.name"
                          v-model="row.quantity"
                          @input.stop="numberChange(row, $event, getGlobalIndex(groupIndex, index))"
                      />
                    </view>
                    <view class="add" @tap.stop="add(row, getGlobalIndex(groupIndex, index))">
                      <text class="iconfont icon iconjia1"></text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
		<!-- 脚部菜单 -->
		<view
			class="footer"
			:style="{ bottom: footerbottom }"
			v-if="cartList.length !== 0"
		>
			<view class="checkbox-box" @tap="allSelect">
				<view class="checkbox" :class="'text-'+themeColor.name">
					<view :class="[isAllselected ? `on ${'bg-'+themeColor.name}` : '']"></view>
				</view>
				<view class="text">全选</view>
			</view>
			<view
				class="delBtn"
				:class="'text-'+themeColor.name"
				@tap="deleteCartItem"
				v-if="selectedList.length > 0"
				>删除</view
			>
			<view class="delBtn" :class="'text-'+themeColor.name" @tap="clearCart()" v-if="selectedList.length > 0"
				>清空</view
			>
			<view class="settlement">
				<view class="sum"
					>合计:
					<view class="money">{{ moneySymbol }}{{ sumPrice }}</view>
				</view>
<!--				<view class="btn" :class="'bg-'+themeColor.name" @tap="createOrder"-->
<!--					>结算({{ selectedList.length }})</view-->
<!--				>-->
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view
			class="popup spec show"
			v-if="specClass === 'show'"
			@touchmove.stop.prevent="stopPrevent"
			@tap="hideSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask" @tap="hideSpec"></view>
			<view class="layer" @tap.stop="stopPrevent">
				<rf-attr-content
					:isSelectedNum="false"
					:product="productDetail"
					@toggle="toggleSpec"
					></rf-attr-content>
			</view>
		</view>
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>
<script>
import {
	cartItemUpdateSku,
	productDetail
} from '@/api/product';
import rfAttrContent from '@/components/rf-attr-content';
import { mapMutations, mapGetters } from 'vuex';

export default {
  components: { rfAttrContent },
  computed: {
    ...mapGetters(['userId']),
    // 按商品类型分组购物车商品
    groupedCartItems() {
      // 如果购物车为空，返回空数组
      if (!this.cartList || this.cartList.length === 0) {
        return [];
      }

      // 初始化分组对象
      const groups = {};

      // 遍历购物车商品，按类型分组
      this.cartList.forEach(item => {
        // 获取商品类型，优先使用product.type，如果不存在则使用item.type
        let type = 3; // 默认为普通商品

        if (item.product && item.product.type) {
          type = item.product.type;
        }

        // 如果该类型还没有创建分组，创建新分组
        if (!groups[type]) {
          groups[type] = {
            type,
            items: []
          };
        }

        // 将商品添加到对应类型的分组中
        groups[type].items.push(item);
      });

      // 将分组对象转换为数组，并按类型排序
      return Object.values(groups).sort((a, b) => a.type - b.type);
    }
  },
	data() {
		return {
			sumPrice: '0.00',
			headerPosition: 'fixed',
			headerTop: null,
			statusTop: null,
			showHeader: true,
			selectedList: [],
			isAllselected: false,
			// 控制滑动效果
			theIndex: null,
			oldIndex: null,
			isStop: false,
			cartList: [],
			hasLogin: null,
			footerbottom: 0,
			specClass: 'none',
			productDetail: {
        base_attribute_format: [],
        sku: []
			},
			specSelected: [],
			specChildList: [],
			specList: [],
			currentSkuId: '',
			moneySymbol: this.moneySymbol,
			loading: true,
			singleSkuText: this.singleSkuText
		};
	},
	onPageScroll(e) {
		// 兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
		this.headerTop = e.scrollTop >= 0 ? null : 0;
		this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
	},
	// 下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		this.selectedList.length = 0;
		this.isAllselected = false;
		this.sumPrice = 0;
		this.getCartItemList('refresh');
	},
	onShow() {
		// 兼容H5下结算条位置
		// #ifdef H5
		this.footerbottom =
			document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
		// #endif
		// #ifdef APP-PLUS
		this.showHeader = false;
		// eslint-disable-next-line
		this.statusHeight = plus.navigator.getStatusbarHeight();
		// #endif
		this.initData();
	},
	methods: {
		...mapMutations(['setCartNum']),
		// 规格弹窗开关
		toggleSpec(row) {
			if (parseInt(row.status, 10) === 0) return;
			if (this.specClass === 'show') {
				if (!this.hasLogin) {
					this.specClass = 'none';
					this.$mHelper.toast('请先登录！');
					return;
				}
				this.handleCartItemUpdateSku(this.currentSkuId, row.skuId);
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				if (row) {
					this.getProductDetail(row);
				}
			}
		},
		// 获取产品详情
		async getProductDetail(row) {
			this.currentSkuId = row.sku_id;
			await this.$http
				.get(`${productDetail}`, {
					id: row.product_id
				})
				.then(async r => {
					this.productDetail = r.data;
					this.productDetail.sku_name = row.sku_name;
					this.specClass = 'show';
				});
		},
		hideSpec() {
			this.specClass = 'hide';
			setTimeout(() => {
				this.specClass = 'none';
			}, 250);
		},
		stopPrevent() {},
		// 删除选中购物车商品
		async deleteCartItem(id, type) {
			const skuIds = [];
			if (type) {
				skuIds.push(id);
			} else {
				for (let i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].selected) {
						skuIds.push((this.cartList[i].id));
					}
				}
			}
			await this.$api.deleteAllCartItem({ ids: skuIds })
				.then(() => {
					this.getCartItemList();
				});
		},
		// 修改购物车商品sku
		async handleCartItemUpdateSku(skuId, newSkuId) {
			await this.$http
				.post(`${cartItemUpdateSku}`, {
					sku_id: skuId,
					new_sku_id: newSkuId
				})
				.then(() => {
					this.selectedList.length = 0;
					this.isAllselected = false;
					this.sumPrice = 0;
					this.getCartItemList();
				});
		},
		// 数据初始化
		initData() {
			this.hasLogin = this.$mStore.getters.hasLogin;
			if (this.hasLogin) {
				this.theIndex = null;
				this.oldIndex = null;
				this.selectedList.length = 0;
				this.isAllselected = false;
				this.sumPrice = 0;
				this.getCartItemList();
			} else {
				this.cartList = [];
				this.selectedList.length = 0;
				this.loading = false;
			}
		},
		// 通用跳转
		navTo(route) {
			if (!this.$mStore.getters.hasLogin) {
				uni.setStorageSync('backToPage', JSON.stringify({ route: '/pages/cart/cart' }));
			}
			this.$mRouter.push({ route });
		},
		// 获取购物车列表
		async getCartItemList(type) {
			if (!this.userId) return;
      this.loading = true
			await this.$api.getCartItemList({ member_user_id: this.userId }).then(r => {
        this.cartList = [];
        this.selectedList = [];
        this.isAllselected = false;
        this.loading = false;
				if (type === 'refresh') {
					uni.stopPullDownRefresh();
				}

				// 更新购物车列表
				this.cartList = r;

				// 更新选中列表
				this.selectedList = r.filter(item => item.selected === 1).map(item => item.id);

				// 更新全选状态
				this.isAllselected = this.selectedList.length > 0 && this.selectedList.length === this.cartList.length;

				// 更新购物车数量
				let cartNum = 0;
				r.forEach(item => {
					cartNum += item.quantity;
				});
				this.setCartNum(cartNum);

				// 计算总价
				this.sum();
			})
			.catch(() => {
				this.cartList = [];
				this.selectedList = [];
				this.isAllselected = false;
				this.loading = false;
				if (type === 'refresh') {
					uni.stopPullDownRefresh();
				}
			});
		},
		// 清空购物车
		clearCart(params) {
			const content = params ? '清空失效商品？' : '清空购物车？';
			uni.showModal({
				content,
				success: async e => {
					if (e.confirm) {
						await this.$api.clearCartItem({ userId: this.userId }).then(() => {
							this.getCartItemList();
						});
					}
				}
			});
		},
		// 控制左滑删除效果
		touchStart(index, event) {
			// 多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			this.oldIndex = this.theIndex;
			this.theIndex = null;
			// 初始坐标
			this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
		},
		touchMove(index, event) {
			// 多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			let moveX = event.touches[0].pageX - this.initXY[0];
			let moveY = event.touches[0].pageY - this.initXY[1];

			if (this.isStop || Math.abs(moveX) < 5) {
				return;
			}
			if (Math.abs(moveY) > Math.abs(moveX)) {
				// 竖向滑动-不触发左滑效果
				this.isStop = true;
				return;
			}

			if (moveX < 0) {
				this.theIndex = index;
				this.isStop = true;
			} else if (moveX > 0) {
				if (this.theIndex != null && this.oldIndex === this.theIndex) {
					this.oldIndex = index;
					this.theIndex = null;
					this.isStop = true;
					setTimeout(() => {
						this.oldIndex = null;
					}, 150);
				}
			}
		},
		touchEnd(index, $event) {
			// 结束禁止触发效果
			this.isStop = false;
		},
		// 选中商品
		selected(index, item) {
			if (parseInt(item.status, 10) === 0) return;

			// 切换选中状态 1->0 或 0->1
			const newSelected = item.selected === 1 ? 0 : 1;

			uni.showLoading({
				title: '加载中'
			});

			// 调用API更新选中状态
			this.$api.updateCartItemSelected({
				id: item.id,
				selected: newSelected,
				userId: this.userId
			}).then(res => {
				// 直接重新获取购物车列表，确保数据一致性
				this.getCartItemList();
			}).catch(err => {
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
			}).finally(() => {
				uni.hideLoading();
			});
		},
		// 全选商品
		allSelect() {
			// 切换全选状态
			const newSelected = this.isAllselected ? 0 : 1;

			uni.showLoading({
				title: '加载中'
			});

			// 调用API更新所有商品的选中状态
			this.$api.updateAllCartItemSelected({
				userId: this.userId,
				selected: newSelected
			}).then(res => {
				// 直接重新获取购物车列表，确保数据一致性
				this.getCartItemList();
			}).catch(err => {
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
			}).finally(() => {
				uni.hideLoading();
			});
		},
		// 减少数量(执行接口)
		sub(item, index) {
			if (item.quantity <= 1) {
				return;
			}
			item.quantity--;
			this.numberChange(item);
		},
		// 增加数量(执行接口)
		add(item, index) {
			item.quantity++;
			this.numberChange(item, undefined, index, 'add');
		},
		// 控制可输入购物车商品数量
		discard() {},
		// 获取商品类型名称
		getProductTypeName(type) {
			switch (parseInt(type)) {
				case 1:
					return '办公用品';
				case 2:
					return '大桶水';
				case 3:
					return '普通商品';
				default:
					return '其他商品';
			}
		},
		// 获取全局索引（用于处理分组后的索引计算）
		getGlobalIndex(groupIndex, itemIndex) {
			// 计算全局索引
			let globalIndex = 0;

			// 将之前所有组的商品数量累加
			for (let i = 0; i < groupIndex; i++) {
				if (this.groupedCartItems[i] && this.groupedCartItems[i].items) {
					globalIndex += this.groupedCartItems[i].items.length;
				}
			}

			// 加上当前组内的索引
			return globalIndex + itemIndex;
		},

		// 检查分组内所有商品是否全部选中
		isGroupAllSelected(group) {
			// 如果组内没有商品，返回 false
			if (!group.items || group.items.length === 0) {
				return false;
			}

			// 检查组内所有商品是否都被选中
			const selectedCount = group.items.filter(item => item.selected === 1).length;
			return selectedCount === group.items.length;
		},

		// 检查分组内是否有选中的商品
		hasGroupSelectedItems(group) {
			// 如果组内没有商品，返回 false
			if (!group.items || group.items.length === 0) {
				return false;
			}

			// 检查组内是否有选中的商品
			const selectedCount = group.items.filter(item => item.selected === 1).length;
			return selectedCount > 0;
		},

		// 结算分组内的商品
		settleGroup(group) {
			// 如果组内没有选中商品，不允许结算
			if (!this.hasGroupSelectedItems(group)) {
				uni.showToast({
					title: '请至少选择一件商品',
					icon: 'none'
				});
				return;
			}

			// 创建订单数据
			const data = {};
			const ids = [];

			// 只收集选中商品的 ID
			group.items.forEach(item => {
				if (item.selected === 1) {
					ids.push(parseInt(item.id, 10));
				}
			});

			data.type = 'cart';
			data.data = ids.join(',');

			// 添加商品类型信息
			data.productType = group.type;

			// 导航到订单创建页面
			this.navTo(`/pages/order/create/order?data=${JSON.stringify(data)}`);
		},
		// 监听购物车商品数量改变
		async numberChange(item, data, index, type) {
			if (data) {
				item.quantity = data.detail.value;
			}
			await this.$api.updateCartItemNum( {
					id: item.id,
          quantity: item.quantity
				})
				.then(r => {
          this.sum();
          this.$mHelper.toast('添加成功');
				})
				.catch(() => {
					if (type === 'add') {
						item.quantity--;
					}
				});
		},
		// 创建订单
		async createOrder() {
			if (this.selectedList.length === 0) return;

			// 检查选中商品的类型是否一致
			const selectedItems = this.cartList.filter(item => item.selected === 1);
			const productTypes = new Set();

			// 收集所有选中商品的类型
			selectedItems.forEach(item => {
				if (item.product && item.product.type) {
					productTypes.add(item.product.type);
				} else if (item.type) {
					productTypes.add(item.type);
				}
			});

			// 如果有多个不同类型的商品被选中，显示提示
			if (productTypes.size > 1) {
				uni.showModal({
					title: '提示',
					content: '请选择相同类型的商品一起结算。\n\n办公用品、大桶水和普通商品需要分开结算。',
					showCancel: false
				});
				return;
			}

			// 继续创建订单的正常流程
			const data = {};
			const ids = [];

			selectedItems.forEach(item => {
				ids.push(parseInt(item.id, 10));
			});

			data.type = 'cart';
			data.data = ids.join(',');

			// 添加商品类型信息
			if (productTypes.size === 1) {
				data.productType = Array.from(productTypes)[0];
			}

			this.selectedList.length = 0;
			this.isAllselected = false;
			this.sumPrice = 0;
			this.navTo(`/pages/order/create/order?data=${JSON.stringify(data)}`);
		},
		// 合计
		sum() {
			this.sumPrice = 0;
			let len = this.cartList.length;

			// 直接计算选中商品的总价
			for (let i = 0; i < len; i++) {
				const item = this.cartList[i];
				// 只计算选中的商品
				if (item.selected === 1) {
					// 获取商品单价
					const price = item.productItem && item.productItem.price ? parseFloat(item.productItem.price) : 0;
					// 计算该商品的总价 = 单价 × 数量
					const itemTotal = price * item.quantity;
					// 累加到总价中
					this.sumPrice += itemTotal;
				}
			}

			// 保留两位小数
			this.sumPrice = this.sumPrice.toFixed(2);
		},
		// 向下舍去小数点后两位
		floor(val) {
			return Math.floor(val * 100) / 100;
		},
		// 计算相同商品不同规格价格
		arrSort(arr) {
			// 简化计算逻辑，直接计算总价
			let sum = 0;
			for (let i = 0; i < arr.length; i++) {
				const item = arr[i];
				// 获取商品单价
				const price = item.productItem && item.productItem.price ? parseFloat(item.productItem.price) : 0;
				// 计算该商品的总价 = 单价 × 数量
				const itemTotal = price * item.quantity;
				// 累加到总价中
				sum += itemTotal;
			}
			return sum;
		}
	}
};
</script>
<style lang="scss">
page {
}
.cart {
  padding: 20rpx;
  background-color: #F5F5F5;
}
.checkbox-box {
	display: flex;
	align-items: center;

	.checkbox {
		width: 30upx;
		height: 30upx;
		border-radius: 100%;
		border: solid 2upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.on {
			width: 20upx;
			height: 20upx;
			border-radius: 100%;
		}
	}

	.checkbox-disabled {
		border: solid 2upx $font-color-disabled;
	}

	.text {
		font-size: 28upx;
		margin-left: 10upx;
	}
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: #fff;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}
.header {
	width: 92%;
	padding: 0 4%;
	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #fff;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	.title {
		font-size: 36upx;
	}
}
.place {
	background-color: #fff;
	height: 100upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.goods-list {
	width: 100%;
  border-radius: 16rpx;
  background-color: #ffffff;
  margin-bottom: 24rpx;
  padding: 0 24rpx;
  .rf-cart-row {
    margin: 0;
    width: 100%;
    box-shadow: none;
    height: 180rpx;
    .carrier .goods-info .info {
      height: inherit;
    }
    .carrier .goods-info .info .price {
      color: $uni-color-primary;
    }
    .carrier .goods-info .img uni-image,
    .carrier .goods-info .img {
      width: 120rpx;
      height: 120rpx;
      flex-shrink: 0;
    }
    .carrier .checkbox-box {
      padding-left: 0;
    }
  }
	.btn-clear {
		text-align: right;
		padding: 0 $spacing-lg;
		font-size: $font-base + 2upx;
	}

	.tis {
		width: 100%;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
	}
}
.empty {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	padding-bottom: 100upx;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background: #fff;

	.icongouwuche {
		font-size: $font-lg + 100upx;
	}

	.empty-tips {
		display: flex;
		font-size: $font-sm + 2upx;
		color: $font-color-disabled;

		.navigator {
			margin-left: 16upx;
		}
	}
}
.footer {
	width: 100%;
	padding: 0 2%;
	background-color: #ffffff;
  border-bottom: 1px solid #f8f8f8;
  border-top: 1px solid #f8f8f8;
	height: 100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	position: fixed;
  left: 0;
	bottom: 0upx;
	z-index: 5;

	.delBtn {
		border: solid 1upx;
		padding: 0 24upx;
		height: 42upx;
		border-radius: 24upx;
		font-size: $font-sm;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.settlement {
		width: 52%;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.sum {
			font-size: $font-base;
			margin-right: 8upx;
			display: flex;
			justify-content: flex-end;

			.money {
				font-weight: 600;
			}
		}

		.btn {
			padding: 0 26upx;
			height: 50upx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30upx;
		}
	}
}
.popup .layer {
	// #ifndef H5
	bottom: 0;
	// #endif
}

/* 商品分组样式 */
.group-title {
	font-size: 28rpx;
	font-weight: bold;
	//color: $u-primary;
  border-bottom: 1px solid #f8f8f8;
  padding: 24rpx 0 12rpx 0;
  margin-bottom: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .group-settle {
    font-size: 24rpx;
    padding: 6rpx 20rpx;
    border-radius: 30rpx;
    background-color: #f0f0f0;
    color: #999;
    font-weight: normal;

    &.active {
      background-color: $u-primary;
      color: #fff;
    }
  }
}
</style>
